<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1.0,minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="format-detection" content="telephone=no">
  <meta name="format-detection" content="email=no">
  <meta name="keywords" content="半次元,次元社,第一弹,juju,萌购,dilidili,布丁,bilibili,战舰少女,少女咖啡枪,前线,暖暖,哔哩哔哩,cosplay,女优,欧派,捏他,捏ta,被窝,绝对领域,动画,漫画,弹幕,宅男,声优,梦见,集,萌娘,同人,手游,美图,绅士,阴阳师">
  <meta name="description" content="【难得一见】的二次元虚拟生活平台，绝对不同于“论坛”、“社团”、“同好会”的存在；【美貌绝伦】的移动App，将一成不变的界面以动漫学园的形式呈现，大欧派前辈、死库水学妹都是你可以随意调戏的看板娘。【屈指可数】的GalGame化应用，将一切内容以游戏形式呈现，线下可攻略女主角、线上能组团推主线；【凤毛麟角】般充满惊喜的App，全图随机彩蛋每日不同、神奇Gacha活动好礼连连，一不小心就会收到霓虹国寄来的惊喜；【名列前茅】的二次元综合信息网，新番漫画美图音乐展会悉数涵盖，更有珍稀资源专供作为老司机的你；【实力强劲】的dalao级行业地位，与各种漫展、演唱会、旅行团、手办销售、游戏厂商都有一腿，优惠福利应有尽有。">
  <link rel="shortcut icon" href="../public/img/x-icon.png">
  <link rel="bookmark" href="../public/img/x-icon.png" type="image/x-icon">
  <link rel="apple-touch-icon-precomposed" href=".../public/img/x-icon.png">
  <title>Kira - 你的二次元生活，动漫新番资源福利社区</title>
  <link rel="stylesheet" href="../public/css/reset.css">
  <link rel="stylesheet" href="../public/css/swiper-4.2.6.min.css">
  <link rel="stylesheet" href="../public/css/font-awesome.min.css">
  <link rel="stylesheet" href="../public/css/com.css">
</head>
<body>
  <div class="bagpage" id="Bag">
    <public-header :status="header"></public-header>
    <div class="content main">
      <div class="hotbag">
        <div class="left-content">
          <h2>
              <div class="title"><img src="../public/img/icon-hotbag.png" alt="" class="icon" width="30" height="36"><span>热门书包</span></div>
              
              <div class="detail"><span><i class="fa fa-refresh"></i>换一批</span><a href="#">进去逛逛<i class="fa fa-angle-right"></i></a></div>
          </h2>
          <ul class="list">
              <li v-for="item in 10" >
                  <a href="#">
                      <div class="img-contet">
                          <img src="../public/img/temp3.jpg" alt="">
                          <i class="type">{{'类别'+item}}</i>
                          <div class="price-nums">
                              <span class="price">20节操</span>
                              <span class="nums">48项</span>
                          </div>
                      </div>
                      <p class="description">えっちゃん本気もーどえっちゃん本気もーどえっちゃん本気もーど</p>
                      <div class="view-comments">
                          <span class="view"><i></i>3213</span>
                          <span class="comments"><i></i>61</span>
                      </div>
                  </a>
              </li>
          </ul>
      </div>
        
          <user-info :data="userInfo"></user-info>
        
      </div>
      <div class="school-bag">
        <div class="left-content">
            <h2>
                <div class="title"><img src="../public/img/icon-bag.png" alt="" class="icon" width="30" height="36"><span>书包</span></div>
                <ul class="menu">
                  <li
                      v-for="(item,key) in division"
                      :key="key"
                      :class="{active: item.checked}"
                      @click="switchMenu(item.name,key)">
                      {{ item.name }}
                  </li>
              </ul>
                <div class="detail"><span><i class="fa fa-refresh"></i>换一批</span><a href="#">进去逛逛<i class="fa fa-angle-right"></i></a></div>
            </h2>
            <ul class="list">
                <li v-for="item in 15" >
                    <a href="#">
                        <div class="img-contet">
                            <img src="../public/img/temp3.jpg" alt="">
                            <i class="type">{{'类别'+item}}</i>
                            <div class="price-nums">
                                <span class="price">20节操</span>
                                <span class="nums">48项</span>
                            </div>
                        </div>
                        <p class="description">えっちゃん本気もーどえっちゃん本気もーどえっちゃん本気もーど</p>
                        <div class="view-comments">
                            <span class="view"><i></i>3213</span>
                            <span class="comments"><i></i>61</span>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="right-content ">
            <h2 class="img-title">书包<b class="ranking">排行榜</b><div class="data"><span class="active">今日</span><span>本周</span></div></h2>
            <ul class="list">
                <li v-for="item in 5">
                    <a href="#" v-if="item <= 3">
                        <dl>
                            <dt :data-num="item"><i class="type">{{'类别'+item}}</i><img src="../public/img/temp3.jpg" alt=""></dt>
                            <dd>
                                <h6>拥有多职业改动！魔兽世界PTR7.2.5官方补丁说明</h6>
                                <div>UP:水树奈奈</div>
                                <div class="view-comments"><span class="view"><i></i>3213</span> <span class="comments"><i></i>61</span></div>
                            </dd>
                        </dl>
                    </a>
                    <a href="http://www.baidu.com" v-else><p :data-num="item">身材略过丰满 《闪乱神乐：沙滩戏水》索尼身材略过丰满 《闪乱神乐：沙滩戏水》索尼</p></a>
                </li>
            </ul>
        </div>
    </div>
    </div>
  </div>
</body>
<script src="../public/js/jquery-1.11.1.min.js"></script>
  <script src="../public/js/underscore.js"></script>
  <script src="../public/js/swiper-4.2.6.min.js"></script>
  <script src="../public/js/vue.js"></script>
  <script src="../public/js/com.js"></script>
  <script src="../public/components/components.js"></script>
  <script>
    var bag = new Vue({
      el: '#Bag',
      data: {
        header: {
          loginStatus: true,
          index: 4,
        },
        userInfo: {
          index:3,
        },
        division: [{
            name: "新闻部",
            checked: true,
            list: {},
            rank: {}
          },
          {
            name: "美图部",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "游戏部",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "图书馆",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "影音部",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "茶话部",
            checked: false,
            list: {},
            rank: {}
          },
          {
            name: "⼩卖部",
            checked: false,
            list: {},
            rank: {}
          },
        ],
      },
      mounted() {
        this.getnews();
      },
      methods: {
        getnews: function () {
          $.ajax({
            url: "http://2333.moemoe.la/api/cal/docs?index=0&size=20&roomId=26f9831a-5f7f-11e6-8f94-d0a637eac7d7&before=20180605162220",
            dataType: "json",
            data: {
              'index': '0',
              'size': '20',
              'roomld': '26f9831a-5f7f-11e6-8f94-d0a637eac7d7',
              'before': '20180605162220'
            },
            success: function (data) {
              bag.division[0].list = data.data.list;
            }
          })
        },
      },
    })
  </script>
</html>